<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/layout/template.xhtml">
	<ui:define name="body">
		<h:form>
			<p:growl id="messages" showDetail="true" />
				<p:schedule id="schedule" value="#{calendario.lazyEventModel}"
					widgetVar="myschedule" timeZone="GMT-5" locale="es">

					<p:ajax event="dateSelect" listener="#{calendario.onDateSelect}"
						update="eventDetails" oncomplete="PF('eventDialog').show();" />
					<p:ajax event="eventSelect" listener="#{calendario.onEventSelect}"
						update="eventDetails" oncomplete="PF('eventDialog').show();" />
					<p:ajax event="eventMove" listener="#{calendario.onEventMove}"
						update="messages" />
					<p:ajax event="eventResize" listener="#{calendario.onEventResize}"
						update="messages" />

				</p:schedule>


			<p:dialog widgetVar="eventDialog" header="Event Details"
				showEffect="clip" hideEffect="clip">
				<h:panelGrid id="eventDetails" columns="2">
					<h:outputLabel for="title" value="Title:" />
					<p:inputText id="title" value="#{calendario.event.title}"
						required="true" />

					<h:outputLabel for="from" value="From:" />
					<p:inputMask id="from" value="#{calendario.event.startDate}"
						mask="99/99/9999">
						<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2" />
					</p:inputMask>

					<h:outputLabel for="to" value="To:" />
					<p:inputMask id="to" value="#{calendario.event.endDate}"
						mask="99/99/9999">
						<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2" />
					</p:inputMask>

					<h:outputLabel for="allDay" value="All Day:" />
					<h:selectBooleanCheckbox id="allDay"
						value="#{calendario.event.allDay}" />

					<p:commandButton type="reset" value="Reset" />
					<p:commandButton id="addButton" value="Save"
						actionListener="#{calendario.addEvent}"
						oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
				</h:panelGrid>
			</p:dialog>
		</h:form>

		<script type="text/javascript">
		PrimeFaces.locales['es'] = {
			    closeText: 'Cerrar',
			    prevText: 'Anterior',
			    nextText: 'Siguiente',
			    monthNames: ['Enero','Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
			    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
			    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
			    dayNamesShort: ['Dom','Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
			    dayNamesMin: ['D','L','M','X','J','V','S'],
			    weekHeader: 'Semana',
			    firstDay: 1,
			    isRTL: false,
			    showMonthAfterYear: false,
			    yearSuffix: '',
			    timeOnlyTitle: 'Sólo hora',
			    timeText: 'Tiempo',
			    hourText: 'Hora',
			    minuteText: 'Minuto',
			    secondText: 'Segundo',
			    currentText: 'Fecha actual',
			    ampm: false,
			    month: 'Mes',
			    week: 'Semana',
			    day: 'Día',
			    allDayText : 'Todo el día'
    };
</script>
		<style type="text/css">
.value {
	width: 1000px;
}
</style>
	</ui:define>
</ui:composition>
</html>
